<template>
	<view class="viewport">
	<!-- 自定义导航栏 -->
	<CustomNavbar></CustomNavbar>
	<!-- 滚动容器 -->
		<scroll-view
		enable-back-to-top
		refresher-enabled
		@refresherrefresh="onRefresherrefresh"
		:refresher-triggered="isTriggered"
		@scrolltolower="onScrolltolower"
		class="scroll-view"
		scroll-y
		>
		<!-- refresher-triggered 设置当前下拉刷新的状态 主要处理动态效果 -->
		<!-- refresher-enabled 开启自定义下拉刷新 默认为true开启下拉刷新 -->
		<!-- @refresherrefresh 自定义下拉刷新被触发 -->
		<!-- scrolltolower 滚动触底 -->
			<PageSkeleton v-if="isLoading" />
			<template v-else>
				<!-- 轮播图 -->
				<XtxSwiper :list="bannerList"></XtxSwiper>
				<!-- 分类面板 -->
				<CategoryPanel :list="categoryList"></CategoryPanel>
				<!-- 热门推荐 -->
				<HotPanel :list="hotList"></HotPanel>
				<!-- 猜你喜欢 -->
				<XtxGuess ref="guessRef"></XtxGuess>
			</template>
		</scroll-view>
	</view>
</template>

<script setup>
	// 引入组件
	import CustomNavbar from './components/CustomNavbar'
	import CategoryPanel from './components/CategoryPanel.vue'
	import HotPanel from './components/HotPanel.vue'
	
	// 引入接口
	import {getHomeBannerAPI,getHomeCategoryAPI,getHomeHotAPI} from '@/api/home'
	
	
	import {onLoad} from '@dcloudio/uni-app'
	import { ref } from 'vue';
	
	// 引入骨架屏
	import PageSkeleton from './components/PageSkeleton.vue'
import { useGuessList } from '../../components'
	
	// 获取轮播图
	const bannerList=ref([])
	const getHomeBannerData=async()=>{
		const res=await getHomeBannerAPI()
		// console.log(res.result);
		bannerList.value=res.result
	}

	// 获取前台分类数据
	const categoryList = ref([])
	const getHomeCategoryData = async () => {
	  const res = await getHomeCategoryAPI()
	  // console.log(res.result);
	  categoryList.value = res.result
	}
	
	// 获取热门推荐数据
	const hotList = ref([])
	const getHomeHotData = async () => {
	  const res = await getHomeHotAPI()
	  hotList.value = res.result
	  console.log(res.result);
	}
	// 是否加载中标记
	const isLoading=ref(false)
	
	// 页面加载
	/***注意：骨架屏生命周期调用要用async 和await  要不然会不生效骨架屏****/
	onLoad(async()=>{
		isLoading.value = true
		await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
		isLoading.value = false
	})
	
	
	// // 进行滚动刷新数据
	// const guessRef=ref()
	// // 滚动触底
	// const onScrolltolower=()=>{
	// 	// console.log("滚动处理了");
	// 	// getMore为猜你喜欢暴露的方法
	// 	guessRef.value?.getMore()
	// }
	// 优化成直接用组合式函数来写
	const { guessRef, onScrolltolower } = useGuessList()
	
	
	
	// 当前下拉刷新状态
	const isTriggered = ref(false)
	// 自定义下拉刷新被触发
	const onRefresherrefresh=async()=>{
		// console.log("下拉");
		// 开始动画
		isTriggered.value=true
		
		// 加载数据
		// await getHomeBannerData()
		// await getHomeCategoryData()
		// await getHomeHotData()
		
		// 重置猜你喜欢组件数据
		guessRef.value?.resetData()
		// 优化
		await Promise.all([
			getHomeBannerData(),
			getHomeCategoryData(),
			getHomeHotData(),
			guessRef.value?.getMore()
		])
		
		// 关闭动画
		isTriggered.value=false
	}
</script>

<style>
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}
</style>
